<template>
    <view class="content">
        <view class="tip">选择需要体检的会员</view>
		
		<view class="item" v-for="(item, index) in list" :key="index" v-if="item.status != 0 && item.exam_nums > 0"
			:class="{active : item.isSelect}" @click="choose(item)">
			<image :src="item.isSelect ? '../../static/icon/choose_1.png' : '../../static/icon/choose_2.png'" 
				class="choose-1"></image>
			<view class="u-flex-1">
				<view class="item-t">
					<view class="name">{{item.nickname}}</view>
					<view class="sub">剩余体检次数:{{item.exam_nums}}次</view>
				</view>
				<view class="sub">{{item.IDCard}}</view>
			</view>
		</view>
		
		<view class="btn" @click="next">下一步</view>
		
		<view class="tip" @click="show = true">
			查看体检须知
			<u-icon name="arrow-right" color="#919191" size="24" class="u-m-l-10"></u-icon>
		</view>
		
		<u-mask :show="show" mode="center" border-radius="30">
		    <view class="popup">
		        <view class="win-box3">
		            <view class="pop-up2">
		                <view class="pop-tit">{{content.title}}</view>
						<view>
							<scroll-view scroll-y="true" style="height:400rpx;">
								<view class="pop-text">
									<u-parse :html="content.content"></u-parse>
								</view>
							</scroll-view>
						</view>
		            </view>
		            <image src="/static/icon/close.png" class="pop-del" @click="show = false"></image>
		        </view>
		    </view>
		</u-mask>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				show: false,
				content: {},
                list: [],
            };
        },
        onLoad() {
            this.getList()
			this.getContent()
        },
        methods: {
            next() {
				let card_id = ''
				this.list.forEach(ii => {
				    if (ii.isSelect) {
						card_id = ii.id
					}
				})
				if (!card_id) {
					this.$toast('请选择需要体检的会员')
					return
				} else {
					this.$cTo(`./list?card_id=${card_id}`)
				}
			},
			
			choose(item) {
				const nowStatu = item.isSelect
				this.list.forEach(ii => {
				    ii.isSelect = false
				})
				item.isSelect =! nowStatu
			},
			
			getList() {
				this.$ajax('get_cards', {
			        userToken: this.$getSync('userToken'),
					type: 1,//0个人中心 1体检预约
			    }).then(ret => {
					if (ret.status == 0) {
			            this.list = ret.data
						if (this.list && this.list.length > 0) {
							this.list.forEach((cur,index) => {
								if (index == 0) {
									if (cur.status != 0 && cur.exam_nums > 0) {
										this.$set(cur, 'isSelect', true)
									}
								} else {
									this.$set(cur, 'isSelect', false)
								}
							})
						}
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			getContent() {
				this.$ajax('get_content', {
			        type: 8,
					//3线上咨询服务协议 4上传体检报告温馨提示 5隐私协议 6如何上传体检报告 7极速问诊须知 
					//8体检须知 9体检项目提示 10体检预约温馨提示 11赠送亲友温馨提示 12会员服务协议
					//13购卡订单提示 14激活码开卡提示 15我要挂号须知
			    }).then(ret => {
					if (ret.status == 0) {
			            this.content = ret.data
					} else {
						this.$toast(ret.message);
					}
				});
			},
        }
    };
</script>

<style lang="scss">
	.popup {
	    width: 100vw;
	    height: 100vh;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    flex-direction: column;
	}
	.win-box3 {
	    width: 616rpx;
	    background: #fff;
	    border-radius: 30rpx;
		position: relative;
	}
	.pop-up2{
		width: 616rpx;
		padding: 50rpx 40rpx;
	}
	.pop-tit{
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		padding-bottom: 30rpx;
	}
	.pop-text{
		font-size: 28rpx;
		overflow: hidden;
	}
	.pop-del {
	    width: 7vw;
	    height: 7vw;
	    position: absolute;
	    left: 38vw;
	    bottom: -100upx;
	}
	
    page{
        background-color: #f5f5f5;
    }
	.content{
		padding: 35rpx 20rpx;
	}
	.tip{
		font-size: 24rpx;
		color: #a0a8b8;
		padding-bottom: 16rpx;
	}
	.btn{
		font-size: 30rpx;
		color: #fff;
		text-align: center;
		padding: 25rpx;
		margin: 60rpx 0 20rpx;
		background: #01b8bd;
		border-radius: 50rpx;
	}
	
	.item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 36rpx 25rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}
	.active{
		background-color: #fff6ef;
		border: 2rpx solid #fac295;
	}
	.choose-1{
		width: 35rpx;
		height: 35rpx;
		margin-right: 25rpx;
	}
	.item-t{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 14rpx;
	}
	.name{
		flex: 1;
		font-size: 32rpx;
		font-weight: bold;
		padding-right: 20rpx;
	}
	.sub{
		font-size: 24rpx;
		color: #9e9e9e;
	}
	
	
	

</style>
